<template>
<div>
  <el-tag :key="tag" v-for="tag in dynamicTags" closable :disable-transitions="false" @close="handleClose(tag)">{{tag}}</el-tag>
  <el-button class="button-new-tag"  @click="showMembers">+ 添加人员</el-button>

  <el-dialog title="人员信息列表清单" :visible.sync="dialogVisible" :before-close="resetDynamicTags" :modal="false" :fullscreen=true :modal-append-to-body="false">
      <div class='filter-container'>
      <!-- <el-tooltip class="item" effect="dark" content="请选择组织" placement="top-start">
      <el-button>培训班组</el-button>
    </el-tooltip>
       <el-tree :data= "data2" show-checkbox :default-expand-all=false node-key="id" ref="tree" :highlight-current=true :props="defaultProps" :check-strictly=true @keyup.enter.native="handleMemberFilter" v-model="memberListQuery.org"></el-tree>
       <div class="buttons">
          <el-button @click="getCheckedKeys">选择组织</el-button>
          </div> -->
      <org-tree :dcksValue="this.dcksValue" :dcksLabel="this.dcksLabel" :checkStrictly=true :isDialog="true" v-model='memberListQuery.orgCode'></org-tree>
        <!-- {{dcksValue}} {{dcksLabel}} -->
      <el-input @keyup.enter.native='handleMemberFilter' style='width: 200px;' class='filter-item' placeholder='岗位' v-model='memberListQuery.postDescr'>
      </el-input>
      <el-input @keyup.enter.native='handleMemberFilter' style='width: 200px;' class='filter-item' placeholder='姓名' v-model='memberListQuery.descr'>
      </el-input>
      <el-button class='filter-item' type='primary'  icon='search' @click='handleMemberFilter'>搜索</el-button>
    </div>
      <el-table ref='multipleTable' @selection-change="handleSelectionChange" :key='memberTableKey' :data='memberList'  element-loading-text='给我一点时间' border fit highlight-current-row style='width: 100%'>
      <el-table-column type="selection">
      </el-table-column>
      <el-table-column   type="index" width="60">
      </el-table-column>
      <el-table-column  label='工号' prop="code">
      </el-table-column>
      <el-table-column label='姓名' prop="descr">
      </el-table-column>
      <el-table-column label='组织' prop="orgDescr">
      </el-table-column>
      <el-table-column label='岗位' prop="postDescr">
      </el-table-column>
       </el-table>
      <div  class='pagination-container'>
      <el-pagination @size-change='handleMemberSizeChange' @current-change='handleMemberCurrentChange' :current-page.sync='memberListQuery.page'
        :page-sizes='[10,20,30,50,100]' :page-size='memberListQuery.limit' layout='total, sizes, prev, pager, next, jumper' :total='memberTotal'>
      </el-pagination>
    </div>
    </el-dialog>
</div>
</template>

<script>
import { fetchMemberList } from "@/api/member";
// import { orgTree } from "@/api/org";
import orgTree from "@/components/OrgTree/orgTree";
export default {
  props: {
    dynamicTags: {
      type: Array,
      default: 
      // []
      function () {
        return []
    }
    }
  },
  components: {orgTree},
  data() {
    return {
      memberTotal: null,
      memberListQuery: {
        page: 1,
        limit: 20,
        org: undefined,
        postDescr: undefined,
        descr: undefined,
        orgCode: undefined,
      },
      memberTableKey: 0,
      tag: "",
      inputVisible: false,
      inputValue: "",
      dialogfVisible: false,
      memberList: null,
      dialogVisible: false,
      multipleSelection: [],
      data2:[],
       dcksValue: [],
      dcksLabel: [],
      defaultProps: {
        children: "children",
        label: "label"
      }
    };
  },
  mounted() {},
  created() {
    // this.getOrgData();
  },
  computed: {
  },
  beforeDestroy() {},
  methods: {
    //  getOrgData(){
    //   orgTree(this.listQuery).then(response => {
    //       this.data2 = response.data.items;
    //   });
    // },
    handleCurrentChange(val) {
      this.listQuery.page = val;
      this.getList();
    },
    handleMemberFilter() {
    //   console.log(this.dcksValue)
      this.memberListQuery.orgCode = this.dcksValue;
      this.memberListQuery.page = 1;
      this.showMembers();
    },
    handleMemberSizeChange(val) {
      this.memberListQuery.limit = val;
    //   console.log("handleMemberSizeChange", val);
      this.showMembers();
    },
    handleMemberCurrentChange(val) {
      this.memberListQuery.page = val;
      this.showMembers();
      //  换页时，需要保留原已选择人员信息
      // console.log("handleMemberCurrentChange-this.multipleSelection",this.multipleSelection);
      // console.log("handleMemberCurrentChange-this.dynamicTags",this.dynamicTags);
      if (this.multipleSelection.length > 0) {
        for (const v of this.multipleSelection) {
          if (!this.dynamicTags.includes(v.code + "-" + v.descr)) {
            this.dynamicTags.push(v.code + "-" + v.descr);
          }
        }
      }
    },
    handleClose(tag) {
      this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1);
    },
    handleSelectionChange(val) {
      if (val.length === 0) {
        this.initSel();
      }
      this.multipleSelection = val;
      // console.log("handleSelectionChange",this.multipleSelection);
      // console.log("handleSelectionChange",this.dynamicTags);
      // console.log("handleSelectionChange",);
    },
    resetDynamicTags() {
      if (this.multipleSelection.length > 0) {
        for (const v of this.multipleSelection) {
          if (!this.dynamicTags.includes(v.code + "-" + v.descr)) {
            this.dynamicTags.push(v.code + "-" + v.descr);
          }
        }
      }
      this.dialogVisible = false;
    },
    initSel() {
      var rows = [];
      for (const v of this.memberList) {
        // console.log(this.dynamicTags);
        for (const y of this.dynamicTags) {
          if (y.substring(0, 6) == v.code && y.substring(7) == v.descr) {
            rows.push(v);
          }
        }
      }
      // console.log("1");
      // console.log(rows);
      this.toggleSelection(rows);
      // console.log("2");
      // console.log(this.multipleSelection);
      // console.log("3");
    },
    toggleSelection(rows) {
      // console.log(5);
      // console.log(rows);
      if (rows) {
        // console.log(4);
        // console.log(rows);
        rows.forEach(row => {
          this.$refs.multipleTable.toggleRowSelection(row);
        });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
      // console.log(6);
      // console.log(rows);
    },
    showMembers() {
      this.$store.dispatch("openLoading");
      this.dialogVisible = true;
      fetchMemberList(this.memberListQuery).then(response => {
        // debugger
        // console.log(response.data);
        if (response.status === 200 && response.data.code === 2000) {
          this.memberList = response.data.items;
          this.memberTotal = response.data.total;
          // console.log(this.dynamicTags)
        } else {
          this.$notify({
            title: "失败1",
            message: response.status + response.data.msg,
            type: "error",
            duration: 200000
          });
        }
      });
      this.$store.dispatch("closeLoading");
    },
    getCheckedKeys() {
      this.memberListQuery.org = this.$refs.tree.getCheckedKeys();
    //   console.log(this.memberListQuery.org)
    },
    handleCheckChange(){
      console.log("handleCheckChange",this.dynamicTags);
       console.log("handleCheckChange",this.multipleSelection);
    }
  }
};
</script>

<style>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>